<template>
  <header class="header pt-2">
    <div class="header-content" ref="stickyElement">
      <div class="wrapper">
        <div class="py-1">
          <el-breadcrumb separator=">">
            <el-breadcrumb-item>手机通讯</el-breadcrumb-item>
            <el-breadcrumb-item>手机 </el-breadcrumb-item>
            <el-breadcrumb-item>手机</el-breadcrumb-item>
            <el-breadcrumb-item>vivo</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="flex justify-between py-3">
          <div class="logo flex items-start">
            <router-link
              to="/"
              class="flex items-center justify-center border-rounded-sm overflow-hidden"
            >
              <el-image
                src="https://img30.360buyimg.com/popshop/jfs/t1/287089/24/17805/243452/004f6501F5a47974b/4a71f07adfb99bb7.gif"
                alt="logo"
                style="height: 65px"
              />
            </router-link>

            <div class="ml-2">
              <div class="flex items-center">
                <span
                  class="bg-red text-3 text-white px-1 rounded-sm"
                  style="line-height: 20px"
                  >自营</span>
                <h1 class="text-3.5 font-600 ml-1">vivo京东自营旗舰店</h1>
              </div>
              <div class="flex py-2">
                <el-button :icon="StarFilled" style="padding:0 7px;font-size: 12px;">关注店铺</el-button>
                <el-button :icon="Headset"  style="padding:0 7px;font-size: 12px;">联系卖家</el-button>
              </div>
            </div>
          </div>
          <div class="flex justify-between">
            <div class="flex items-center">
              <div class="search-wrapper">
                <div class="flex">
                  <div
                    class="search-box bg-white pos-relative"
                    ref="searchBoxRef"
                    @mouseleave="closeFocus"
                  >
                    <div class="flex items-center"
                    style="padding: 2px 2.5px">
                      <div class="search-input">
                        <input
                          placeholder="搜索商品"
                          value=""
                          class="no-border input-text rounded-xl"
                          @click="inputFocus"
                          @focus="inputFocus"
                          @blur="closeFocus"
                          clearable
                        />
                      </div>
                      <button
                        type="button"
                        @click="handleSearch"
                        class="search-btn bg-red-100 mr-1 text-red-500"
                        style="width: 90px"
                        color="red"
                        size="large"
                      >
                        搜本店
                      </button>
                      <button
                        type="button"
                        @click="handleSearch"
                        class="search-btn bg-red-500  text-white "
                        style="width: 90px"
                        color="red"
                        size="large"
                      >
                        搜全站
                      </button>
                    </div>
                    <transition name="fade">
                      <div
                        class="history-box px-2 text-left pb-2 pos-absolute bg-white w-full"
                        style="z-index: 209"
                        v-show="showHistory"
                      >
                        <ul class="py-2">
                          <li class="flex justify-between items-center">
                            <router-link
                              to="/search?keyword=拍照手机"
                              class="text-3.5 text-gray-500 flex-1"
                              >拍照手机</router-link
                            >
                            <span class="text-3.5 text-gray-600">删除</span>
                          </li>

                          <li class="flex justify-between items-center">
                            <router-link to="/" class="text-3.5 text-gray-500 flex-1"
                              >手机</router-link
                            >
                            <span class="text-3.5 text-gray-600">删除</span>
                          </li>
                          <li class="flex justify-between items-center">
                            <router-link to="/" class="text-3.5 text-gray-500 flex-1"
                              >手机</router-link
                            >
                            <span class="text-3.5 text-gray-600">删除</span>
                          </li>
                          <li class="flex justify-between items-center">
                            <router-link to="/" class="text-3.5 text-gray-500 flex-1"
                              >手机</router-link
                            >
                            <span class="text-3.5 text-gray-600">删除</span>
                          </li>
                        </ul>
                      </div>
                    </transition>
                  </div>
                </div>

                <div class="hotwords flex items-center justify-end mt-2">
                  <router-link to="" class="hover:text-red-500">
                    <span class="text-sm text-gray-500 mr-2 text-red"
                      >零食广场五折起</span
                    >
                  </router-link>
                  <router-link to="" class="text-gray-600 hover:text-red-500">
                    <span class="text-sm mr-2 text-red">秋季服装上新限时立减</span>
                  </router-link>
                  <router-link to="" class="text-gray-600 hover:text-red-500">
                    <span class="text-sm mr-2">黛珂小紫瓶</span>
                  </router-link>

                  <router-link to="" class="hover:text-red-500">
                    <span class="text-sm mr-2">wakuku一代</span> </router-link
                  ><router-link to="" class="text-gray-600 hover:text-red-500">
                    <span class="text-sm mr-2">浪浪山小妖怪</span>
                  </router-link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { throttle } from "@/utils/util";
import  {StarFilled,Headset} from "@element-plus/icons-vue";

const route = useRoute();
const router = useRouter();

const stickyElement = ref<HTMLDivElement | null>(null);
const isSticky = ref(false);
// --搜索模块
const showHistory = ref(false);
const searchBoxRef = ref<HTMLDivElement | null>(null);
const searchText = ref("");
const handleSearch = () => {
  if (searchText.value) {
    router.push({
      path: "/search",
      query: {
        keyword: searchText.value,
      },
    });
  }
};
const clearHistory = () => {};
const inputFocus = () => {
  showHistory.value = true;
  if (!searchBoxRef.value) return;
  searchBoxRef.value.classList.add("focus");
};
const closeFocus = () => {
  showHistory.value = false;
  setTimeout(() => {
    if (!searchBoxRef.value) return;
    searchBoxRef.value.classList.remove("focus");
  }, 250);
};
// --- 搜索类型模块
const showTypes = ref(false);
const openTypedown = () => {
  showTypes.value = true;
};
const closeTypedown = () => {
  showTypes.value = false;
};
// --- AI 模块
const showAI = ref(false);
let closeTimer: any = null;
const cancelClose = () => {
  if (closeTimer) {
    clearTimeout(closeTimer);
    closeTimer = null;
  }
};
const openDropdown = () => {
  showAI.value = true;
  cancelClose();
};
const closeDropdown = () => {
  closeTimer = setTimeout(() => {
    showAI.value = false;
  }, 200);
};

const handleScroll = () => {
  // 获取目标元素的DOM引用
  if (!stickyElement.value) return;

  // 获取元素距离文档顶部的距离
  const elementTop = stickyElement.value.offsetTop;
  // 获取当前滚动条垂直位置（跨浏览器兼容写法）
  const scrollTop =
    window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

  // 判断是否应该吸顶
  isSticky.value = scrollTop > elementTop;
};
onMounted(() => {
  window.addEventListener("scroll", throttle(handleScroll, 150));
});
onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll);
});
</script>
<style scoped lang="scss">
header {
  text-align: center;
}
.search-wrapper {
  .types-box {
    .type-item {
      background-color: #fcfcfc;
      border-radius: 5px;
      padding: 5px 15px;
      display: block;
      margin-right: 5px;
      cursor: pointer;
      margin: 10px 0;
      &.active {
        border: 1px solid red;
        color: red;
        background-color: #fff1f1;
      }
      &:hover {
        background-color: #f1f1f1;
      }
    }
  }
  .search-box {
    border: 1px solid red;
    border-radius: 15px;
    box-sizing: border-box;

    &.focus {
      border-bottom: 1px solid #fff !important;
      border-bottom-left-radius: 0px !important;
      border-bottom-right-radius: 0px;
    }

    .search-input {
      width: 430px;
      .input-text {
        width: 100%;
        padding: 0 10px 0 5px;
        height: 35px;
        &:focus {
          outline: none;
        }
      }
    }
    .search-btn{
      height: 35px;line-height: 1;
      @apply rounded-xl  text-4 px-3 py-1  font-600;
    }
    .history-box {
      box-sizing: border-box;
      transform: translateX(-1px);
      border: 1px solid red;
      border-bottom-left-radius: 15px;
      border-bottom-right-radius: 15px;

      border-top: none;
      width: calc(100% + 2px);
      ul {
        li {
          padding: 3.5px 5px;
          span {
            display: none;
            cursor: pointer;
          }
          &:hover {
            background-color: #f5f5f5;
            span {
              display: block;
            }
          }
        }
      }
    }
  }
}
.btn-item {
  padding: 5px 8px;
  background-color: #f5f5f5;
  border-radius: 5px;
  font-size: 0.85rem;
  cursor: pointer;
  &:hover {
    background-color: #eee;
  }
}
</style>
